import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Upload,
  Tabs,
  Collapse, Empty,Select, Button, Table, Modal
} from 'antd';
const { TabPane } = Tabs;
import getMap from './columnsMap.js'
const columnsMap = getMap();
const {MonthPicker, RangePicker} = DatePicker;
@connect(({browseLog, loading}) => ({
  browseLog,
  loading: loading.models.browseLog,
}))
@Form.create()
export default class BrowseLog extends Component {
  componentDidMount() {
    const {dispatch,browseLog:{ page_type_list ,checkType} } = this.props;
    dispatch({
      type: 'browseLog/fetch',
      payload:{
        "page_num": 1,
        "page_size": 10,
        "type" : checkType
      },
    });
  }
  tabChange =(key)=>{
    console.log(key);
    const {dispatch,browseLog:{ page_type_list ,checkType} } = this.props;
    console.log(key);
    dispatch({
      type: 'browseLog/fetch',
      payload:{
        "page_num": 1,
        "page_size": 10,
        "type" : key
      },
    });
  }
  //分页
  tableChange = (pagination, filters, sorter) => {
    const {
      dispatch,browseLog:{ page_type_list ,checkType}
    } = this.props;
    const values = {
      type:checkType,
      page_num: pagination.current,
      page_size: pagination.pageSize,
    };
    dispatch({
      type: 'browseLog/fetch',
      payload: values,
    });
  };
  searchList = ()=>{
    const {
      browseLog :{
        checkType,
        page_num,
        page_size
      },dispatch} = this.props;

    const action = {
      type: `browseLog/fetch`,
      payload: {
        "page_num": 1,
        "page_size": 10,
        "type" : checkType
      },
    };
    dispatch(action);

  }
  render() {
    const {browseLog:{ page_type_list ,checkType ,pagination ,list} }= this.props;
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) =>
        `共有 ${parseInt(total)} 条数据 当前第${pagination.page_num}页`,
      ...pagination,
    };
    console.log(pagination);
    return (
      <PageHeaderWrapper>
        <div
          style={{
            backgroundColor: '#FFFFFF',
            paddingLeft: '5%',
            paddingRight: '5%',
            paddingTop : 30,
            paddingBottom :50
          }}>

          <Tabs tabPosition="left" activeKey ={checkType} onChange={(key)=>this.tabChange(key)}>
            {
              page_type_list.map((item)=>{
                return (
                  <TabPane tab={item.name} key={item.value} >
                    <Button   type="primary" style={{float:'right',width:'120px',marginBottom : '10px' ,zIndex:9999 }}  onClick={()=>{this.searchList()}}>重新查询</Button>

                    <Table
                      dataSource={list}
                      columns={[
                        ...columnsMap[checkType],
                        {
                          title : `浏览时间`,
                          dataIndex: `create_time`,
                          align: `center`,
                          render :(text,record)=>{
                            return text?moment(text).format('YYYY-MM-DD HH:mm:00'):''
                          }
                        },
                      ]}
                      rowKey={record => record.browse_log_id}
                      onChange={this.tableChange}
                      pagination={paginationProps}
                    />
                  </TabPane>
                )
              })
            }
          </Tabs>


        </div>
      </PageHeaderWrapper>
    );
  }
}
